Compose Navigation 是用來在 Jetpack Compose 中處理多個畫面之間的切換。它提供了一個聲明式 API，允許我們定義各個畫面的路徑名稱以及參數，並透過 NavHost 來管理導航邏輯。我們可以使用 NavController 來執行導航操作，像是跳轉到指定畫面或返回上一個畫面。

新增依賴

libs.versions.toml

androidx-navigation = { group = "androidx.navigation", name = "navigation-compose", version = "2.8.0"}

build.gradle

implementation(libs.androidx.navigation)

NavController

負責管理應用中的導航行為與狀態，透過rememberNavController來跳轉到指定畫面或返回上一個畫面。

val navController = rememberNavController()

NavHost

負責定義所有可導航畫面。它負責將不同的 Composable 畫面與相應的路由綁定起來，並且與 NavController 結合使用來處理畫面之間的切換。每個路由對應一個 Composable，當 NavController 進行導航時，NavHost 會自動顯示對應的畫面內容。

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController, modifier) }
        composable("details") { DetailsScreen(navController, modifier) }
    }
}

前往指定頁可以使用 navigate(route)

@Composable
fun HomeScreen(navController: NavController, modifier: Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .width(200.dp)
            .padding(16.dp)
    ) {
        Text("Home Screen")
        Button(onClick = { navController.navigate("details") }) {
            Text("Go to Details")
        }
    }
}

返回上一頁可以使用popBackStack

@Composable
fun DetailsScreen(navController: NavController, modifier: Modifier) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .width(200.dp)
            .padding(16.dp)
    ) {
        Text("Details Screen")
        Button(onClick = { navController.popBackStack() }) {
            Text("Back to Home")
        }
    }
}